<template>
  <div style="width:100%;height:100%">
    <div class="top">
      <van-icon name="cross" size="25" style="margin:10px 0 0 20px;width:10%" @click="$router.push('/shopmallpage')"/>
      <van-search placeholder="搜索城市" color="orange" style="width:90%;border-radius:20px" />
    </div>
    <div class="city">
      <p style="text-indent: 15px;">当前城市</p>
      <div class="now"><van-icon name="location" />{{nowcity}}</div>
    </div>
    <div class="city">
      <p style="text-indent: 15px;">热门城市</p>
      <div style="display:flex;flex-wrap: wrap;">
        <div v-for="item in hotcitys" :key="item" class="hot">{{item}}</div>
      </div>
    </div>
    <!-- ------------------- -->
    <van-index-bar>
      <van-index-anchor index="A" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
      <van-cell title="阿巴嘎旗" />
    </van-index-bar>

  </div>
</template>

<script lang="ts" setup>
  import axios from 'axios';
  import {onMounted, ref,reactive} from 'vue'
  let nowcity=ref()

  let hotcitys= reactive([
    '北京','上海','广州','深圳','青岛','苏州','重庆','成都','杭州',
  ])
let ccc=reactive([])
  onMounted(() => {
    axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/selectcity')
    .then(res=>{
      nowcity.value=res.data.nowcity
      res.data.hotcity.forEach(item => {
        ccc.push(item)
        console.log(ccc);
      });
    })
  })
</script>

<style scoped>
  .var-index-anchor__example {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  transition: all 0.25s;
  background: #e7edf7;
  color: #2e67ba;
}
  .hot{
    width: 27%;
    margin-top:10px;
    margin-left: 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background:#faf8f6;
  }
  .now{
    margin-top:10px;
    margin-left: 15px;
    height: 30px;
    line-height: 30px;
    display:inline-block;
    text-align: center;
    background:#faf8f6;
    padding: 0 15px;
  }
  .city{
    width: 100%;
    margin-top: 20px;
  }
  .top{
    width: 100%;
    height: 50px;
    display: flex;
  }
</style>